<template>  
    <h1> 人&nbsp;&nbsp; 脸&nbsp;&nbsp;  页&nbsp;&nbsp;  面</h1>
    <div class="book-actions">  
      <Row>  
        <Col  class="button-col">  
          <Button type="primary" shape="round" class="custom-button_up" id="one" >  
            <!-- <img src="" alt="Borrow Book" class="button-icon" />   -->
            <Icon type="md-book" style="font-size: 120px;"/> 
            <span class="button-text">借书</span>  
            <span class="button-text_English">CheckOut</span>  
          </Button>  
        </Col>  
        <Col  class="button-col">  
          <Button type="primary" shape="round" class="custom-button_up" id="two">  
            <Icon type="ios-bookmark-outline" style="font-size: 120px;"/>  
            <span class="button-text">还书</span>
            <span class="button-text_English">CheckIn</span>    
          </Button>  
        </Col>  
      </Row>  
      <Row>  
        <Col  class="button-col">  
          <Button type="primary" shape="round" class="custom-button_down" id="three">  
            <Icon type="md-search" style="font-size: 120px;"/>
            <span class="button-text">查询</span>  
            <span class="button-text_English">Query</span>  
          </Button>  
        </Col>  
        <Col  class="button-col">  
          <Button type="primary" shape="round" class="custom-button_down" id="four">  
            <Icon  type="ios-time-outline"  style="font-size: 120px;"/>
            <span class="button-text">续借</span>  
            <span class="button-text_English">Renew</span>  
          </Button>  
        </Col>  
      </Row>  
    </div>  
  </template>  
  
  <script>  
  export default {  
    name: 'BookActions',  
  };  
  </script>  
  
  <style scoped>  
  .book-actions {  
    text-align: center;  
    height: 1200px;
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;
  }  
  .button-col {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    
  }  
  .custom-button_up {  
   
    color: #fff;  
    border-radius: 15px; 
    
    width: 350px;   
    height: 400px;  
    margin: 20px;

    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;/* 可选：如果内容高度不确定，确保内容在垂直方向上居中 */  
    
  }  

  #one{
    background-color: rgb(33, 33, 227); 
    margin-right: 30px; 

  }

  #two{
    background-color: orange;  
  }

  .custom-button_down{
    
    color: #fff;  
    border-radius: 15px; 
    
    width: 350px; 
    height: 400px;  
     
    margin: 20px;

    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;/* 可选：如果内容高度不确定，确保内容在垂直方向上居中 */  
    
  }

  #three{
    margin-right: 35px;
    background-color: skyblue;
  }

  #four{
    background-color: rgb(142, 221, 24);
  }

  .button-icon {  
    width: 40px;  
    height: 40px;  
    margin-bottom: 5px;   
  }  
  .button-text {  
    font-size: 70px; 
    font-family: "仿宋";

    display: flex;  
    flex-direction: column; /* 设定主轴为纵向 */  
    align-items: center; /* 使内容在交叉轴（此例中为水平方向）上居中 */  
    justify-content: center;   
  }  
 .button-text_English{
    font-size: 35px; 
    font-family: "仿宋";
 }
  
  h1{
    margin-top: 80px; /* 距离顶部20px */  
    text-align: center; /* 确保文本在h1内部居中 */
    font-size: 60px;
  }

  body {  
            display: flex;  
            justify-content: center; 
            align-items: flex-start; 
            flex-direction: column; 
                  
            background-color: black !important; /* 使用 !important */  
            background-image: none !important; /* 确保没有背景图片 */ 
        }
  </style>